<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微加加 - 微信好友批量添加工具</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4CAF50',
            secondary: '#007BFF',
            neutral: '#F5F7FA',
            dark: '#333333',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .title-bar {
        @apply bg-primary text-white flex items-center justify-between px-4 py-3 shadow-md;
      }
      .title-text {
        @apply text-xl font-semibold tracking-wide;
      }
      .btn {
        @apply px-4 py-2 rounded transition-all duration-200 focus:outline-none focus:ring-2;
      }
      .btn-primary {
        @apply bg-secondary text-white hover:bg-blue-600 focus:ring-blue-400;
      }
      .btn-header {
        @apply text-white hover:text-gray-200 transition-colors duration-200 p-1;
      }
      .sidebar-item {
        @apply py-3 px-4 border-b border-gray-100 hover:bg-gray-50 transition-colors duration-200 cursor-pointer;
      }
      .sidebar-item-active {
        @apply bg-primary/10 border-l-4 border-primary text-primary font-medium;
      }
      .form-group {
        @apply mb-4;
      }
      .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
      }
      .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
      }
      .card {
        @apply bg-white rounded-lg shadow-sm p-4 transition-all duration-300 hover:shadow-md;
      }
      .container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
      }
    }
  </style>
</head>

<body class="bg-gray-50 min-h-screen">
  <div class="flex flex-col h-screen">
    <!-- 美化后的标题栏 -->
    <div class="title-bar">
      <div class="flex items-center space-x-2">
        <i class="fa-brands fa-weixin text-2xl"></i>
        <span class="title-text">微加加 - 微信好友批量添加工具</span>
      </div>
      <div class="flex space-x-2">
        <button class="btn-header" title="最小化">
          <i class="fa-solid fa-window-minimize"></i>
        </button>
        <button class="btn-header" title="最大化">
          <i class="fa-solid fa-window-maximize"></i>
        </button>
        <button class="btn-header" title="关闭" onclick="window.close()">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧功能区 -->
      <div class="w-56 bg-white shadow-sm border-r border-gray-200 flex-shrink-0">
        <div class="p-3 bg-gray-50 text-xs uppercase text-gray-500 font-semibold">功能菜单</div>
        <div class="sidebar-item sidebar-item-active">
          <i class="fa-solid fa-user-plus mr-2"></i>批量添加好友
        </div>
        <div class="sidebar-item opacity-50 cursor-not-allowed">
          <i class="fa-solid fa-comments mr-2"></i>微信群加好友 (开发中)
        </div>
        <div class="sidebar-item">
          <i class="fa-solid fa-cog mr-2"></i>系统设置
        </div>
        <div class="sidebar-item">
          <i class="fa-solid fa-question-circle mr-2"></i>帮助中心
        </div>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex-1 overflow-y-auto p-4 bg-gray-50">
        <div class="card">
          <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fa-solid fa-user-plus text-primary mr-2"></i>批量添加好友
          </h2>
          <form id="add-friends-form" class="space-y-4">
            <div class="form-group">
              <label for="applyMsg" class="form-label">申请好友信息 <span class="text-xs text-gray-500">(使用 {name} 占位)</span></label>
              <textarea id="applyMsg" class="form-input" rows="3" placeholder="请输入申请信息">您好，我是{name}，想加您为微信好友</textarea>
            </div>
            
            <div class="form-group">
              <label for="prefix" class="form-label">备注前缀</label>
              <input type="text" id="prefix" class="form-input" placeholder="请输入备注前缀" value="21届土木工程">
            </div>
            
            <div class="form-group">
              <label for="excelFile" class="form-label">选择Excel文件</label>
              <div class="flex items-center">
                <input type="file" id="excelFile" class="hidden" accept=".xlsx,.xls">
                <button type="button" id="selectFileBtn" class="btn btn-primary mr-2">
                  <i class="fa-solid fa-file-excel mr-1"></i> 选择文件
                </button>
                <span id="selectedFileName" class="text-sm text-gray-500">未选择文件</span>
              </div>
            </div>
            
            <div class="form-group">
              <label class="flex items-center">
                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                <span class="ml-2 text-sm text-gray-700">记住设置内容</span>
              </label>
            </div>
            
            <div class="pt-2">
              <button type="button" id="startBtn" class="btn btn-primary w-full py-3 flex items-center justify-center">
                <i class="fa-solid fa-play mr-2"></i> 开始添加好友
              </button>
            </div>
          </form>
        </div>
        
        <!-- 进度显示区域 -->
        <div class="card mt-4">
          <h3 class="text-base font-medium text-gray-700 mb-3">任务进度</h3>
          <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
            <div id="progressBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
          </div>
          <div class="flex justify-between text-xs text-gray-500">
            <span>0/0 完成</span>
            <span id="progressStatus">准备就绪</span>
          </div>
          <div id="taskLog" class="mt-3 text-sm text-gray-600 h-32 overflow-y-auto bg-gray-50 p-2 rounded">
            <!-- 任务日志将在这里显示 -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 文件选择按钮事件
    document.getElementById('selectFileBtn').addEventListener('click', function() {
      document.getElementById('excelFile').click();
    });
    
    // 文件选择后显示文件名
    document.getElementById('excelFile').addEventListener('change', function() {
      if (this.files && this.files[0]) {
        document.getElementById('selectedFileName').textContent = this.files[0].name;
      } else {
        document.getElementById('selectedFileName').textContent = '未选择文件';
      }
    });
    
    // 开始按钮事件
    document.getElementById('startBtn').addEventListener('click', function() {
      const applyMsg = document.getElementById('applyMsg').value;
      const prefix = document.getElementById('prefix').value;
      const excelFile = document.getElementById('excelFile').files[0];
      
      if (!applyMsg.trim()) {
        alert('请输入申请好友信息');
        return;
      }
      
      if (!prefix.trim()) {
        alert('请输入备注前缀');
        return;
      }
      
      if (!excelFile) {
        alert('请选择Excel文件');
        return;
      }
      
      // 模拟任务进度
      const progressBar = document.getElementById('progressBar');
      const progressStatus = document.getElementById('progressStatus');
      const taskLog = document.getElementById('taskLog');
      
      progressBar.style.width = '0%';
      progressStatus.textContent = '正在处理...';
      taskLog.innerHTML = '';
      
      let progress = 0;
      const totalSteps = 100;
      const interval = setInterval(() => {
        progress++;
        progressBar.style.width = `${progress}%`;
        
        // 模拟日志输出
        if (progress % 10 === 0) {
          const logEntry = document.createElement('div');
          logEntry.textContent = `已处理 ${progress} 条，添加成功 ${Math.floor(progress * 0.9)} 条`;
          taskLog.appendChild(logEntry);
          taskLog.scrollTop = taskLog.scrollHeight;
        }
        
        if (progress >= totalSteps) {
          clearInterval(interval);
          progressStatus.textContent = '任务完成';
          const logEntry = document.createElement('div');
          logEntry.textContent = '全部好友申请已发送完成';
          logEntry.className = 'text-green-600';
          taskLog.appendChild(logEntry);
          taskLog.scrollTop = taskLog.scrollHeight;
        }
      }, 100);
    });
  </script>
</body>

</html>    